<template>
  <view class="search-good-list" :class="listShowWay ? 'grey-body' : ''">
    <!-- 顶部带搜索条件导航 -->
    <view class="list-header" v-if="goodList.length || show_popup">
      <view class="condition-nav">
        <view class="tabs-section">
          <view
            class="tabs-item"
            v-for="(tab, index) in tabs"
            :key="index"
            @click="handleTabItem(tab, index)"
          >
            <view class="tab-word">
              <view class="tab-text">
                <text>{{ tab.text }}</text>
                <view class="sequence" v-if="tab.haveSequence">
                  <i
                    class="iconfont icon-arrow-up top-icon"
                    :class="
                      tab.sort_type == 1 && index == activeTab
                        ? 'color-red'
                        : ''
                    "
                  ></i>
                  <i
                    class="iconfont icon-arrow-down down-icon"
                    :class="
                      tab.sort_type == 0 && index == activeTab
                        ? 'color-red'
                        : ''
                    "
                  ></i>
                </view>
              </view>
              <view class="active-tab">
                <view v-if="index == activeTab" class="active-icon"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="layout-box" @click="changeLayout">
        <i
          class="iconfont"
          :class="!listShowWay ? 'icon-viewlist' : 'icon-all'"
        ></i>
      </view>
      <view class="tab-options" v-if="showTabOptions">
        <view
          class="options-bg"
          @click="showTabOptions = !showTabOptions"
        ></view>
        <view class="options-content">
          <view
            class="option-item"
            v-for="(option, i) in tabs[activeTab].options"
            :key="i"
            @click="opotionActive = i"
          >
            <text :class="{ activeLabel: opotionActive == i }">{{
              option
            }}</text>
            <image
              v-if="opotionActive == i"
              :src="asyncImgs.images.red_right_icon"
              mode="aspectFit"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 商品列表展示区（支持横竖版切换） -->
    <view
      class="list-body"
      :class="listShowWay ? 'vertical-body' : ''"
      :style="[listBodyStyle]"
      v-if="goodList.length"
    >
      <template v-for="(good, index) in goodList">
        <horizontalList
          v-if="!listShowWay"
          :key="index"
          :good="good"
        ></horizontalList>
      </template>
      <u-waterfall v-show="listShowWay" v-model="goodList" ref="uWaterfall">
        <template v-slot:left="{ leftList }">
          <template v-for="(good, index) in leftList">
            <verticalList :good="good"></verticalList>
          </template>
        </template>
        <template v-slot:right="{ rightList }">
          <template v-for="(good, index) in rightList">
            <verticalList :good="good"></verticalList>
          </template>
        </template>
      </u-waterfall>
      <view class="data-complete" :class="listShowWay ? 'down-padding' : ''"
        >{{ $t("home.noMore") }} ~</view
      >
    </view>
    <view v-else class="no-data">
      <u-empty :text="$t('common.noGoods')" mode="search"></u-empty>
    </view>
  </view>
</template>

<script>
import horizontalList from "./components/horizontalList.vue"; // 横版商品
import verticalList from "./components/verticalList.vue"; // 竖版商品

export default {
  components: {
    horizontalList,
    verticalList,
  },
  props: {
    goodList: {
      type: Array,
      default: [],
    },
    show_popup: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeTab: 0,
      tabs: [
        {
          text: this.$t("list.comprehensive"),
          haveSequence: false,
          sequenceTop: 1,
          sequenceDown: 0,
          options: [this.$t("list.recommended"), this.$t("list.commits")],
          sort: 0,
        },
        {
          text: this.$t("admin.newGoods"),
          haveSequence: false,
          sequenceTop: 0,
          sequenceDown: 0,
          sort: 1,
        },
        {
          text: this.$t("list.price"),
          haveSequence: true,
          sequenceTop: 1,
          sequenceDown: 1,
          sequence: 0, // 默认升序 (1|true):升序 (0|false)：降序
          sort: 2,
          sort_type: -1,
        },
        {
          text: this.$t("goods.count"),
          haveSequence: false,
          sequenceTop: 0,
          sequenceDown: 0,
          sequence: 1, // 默认降序 1:升序 0：降序
          sort: 3,
        },
      ],
      listShowWay: 0, // 列表展示方式： 0-横版,  1-竖版
      showTabOptions: false,
      opotionActive: 0,
    };
  },
  created() {},
  filters: {},
  computed: {
    navTop() {
      return `calc(100rpx+${this.statusBarHeight}px+5px)`;
    },
    listBodyStyle() {
      if (this.show_popup) {
        return {
          padding: "360rpx 0 10rpx 16rpx",
        };
      }
      if (this.listShowWay) {
        return {
          background: "#F2F2F2",
          padding: "96rpx 0 10rpx 16rpx",
        };
      } else {
        return { paddingTop: "104rpx" };
      }
    },
  },
  methods: {
    // tab切换
    handleTabItem(item, index) {
      this.activeTab = index;
      if (item.text == this.$t("list.price")) {
        item.sequence = !item.sequence;
        item.sort_type = item.sort_type == 1 ? 0 : 1;
      }
 
      this.$emit("handleTabCondition", {
        item,
      });
    },
    changeLayout() {
      this.listShowWay = !this.listShowWay;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.search-good-list {
  width: 100%;
  .list-header {
    width: 100%;
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    z-index: 201;
    background-color: #ffffff;

    .condition-nav {
      width: 628rpx;
      height: 80rpx;

      .tabs-section {
        width: 628rpx;
        height: 100%;
        overflow-x: scroll;
        display: flex;
        padding-top: 23rpx;

        .tabs-item {
          width: 25%;
          flex-shrink: 0;

          .tab-word {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            font-weight: 500;
            color: #262626;
            line-height: 1;

            .active-tab {
              width: 26rpx;
              height: 18rpx;
              display: flex;
              justify-content: center;
              align-items: center;

              .active-icon {
                width: 24rpx;
                height: 4rpx;
                background: #f0250e;
              }
            }

            .tab-text {
              display: flex;
              align-items: center;

              .sequence {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-left: 5rpx;
                position: relative;
                height: 29rpx;
                .iconfont {
                  font-size: 26rpx;
                  position: absolute;
                  left: 0;
                  color: #000000;
                }
                .top-icon {
                  top: -6rpx;
                }
                .down-icon {
                  bottom: -6rpx;
                }
                .color-red {
                  color: #f0250e;
                }
              }
            }
          }
        }
      }
    }

    .layout-box {
      width: 100%;
      flex: 1;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        color: #262626;
        font-size: 44rpx;
        font-weight: 500;
        padding-bottom: 10rpx;
      }
    }
  }

  .tab-options {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 80rpx;
    z-index: 111;

    .options-bg {
      width: 100%;
      height: 100vh;
      background-color: black;
      opacity: 0.5;
    }

    .options-content {
      width: 100%;
      height: 190rpx;
      background: #f5f5f5;
      border-radius: 0 0 24rpx 24rpx;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 111;
      padding: 40rpx 36rpx;

      .option-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        font-weight: 400;
        color: #262626;
        margin-bottom: 40rpx;

        image {
          width: 24rpx;
          height: 15rpx;
          display: block;
        }

        .activeLabel {
          font-weight: bold;
        }
      }

      .option-item:last-child {
        margin-bottom: 0;
      }
    }
  }

  .list-body {
    width: 100%;
    min-height: 91vh;
    overflow: hidden;
    .data-complete {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #c1c1c1;
      padding-bottom: 40rpx;
      clear: both;
    }
    .down-padding {
      padding-top: 32rpx;
    }
  }

  .vertical-body {
    padding: 96rpx 0 0 2.13vw;
  }

  .no-data {
    padding-top: 30vh;
  }
}
.grey-body {
  background-color: #f2f2f2;
}
</style>
